<template>
    <div>
        <div class="chart" ref="chart" :style="{ width: '100%', height: '100%' }"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';

export default {
    data() {
        return {
            dataArr: []
        }
    },

    watch: {
        "$store.state.rightDetails.firstMapData": {
            handler() {
                this.initPageOne();
            }
        }
    },

    methods: {
        initPageOne() {
            // console.log('this.$store.state.rightDetails.firstMapData', this.$store.state.rightDetails.firstMapData.asset);
            this.dataArr = this.$store.state.rightDetails.firstMapData.asset
            this.renderChart(); // 获取数据后再渲染图表
        },

        renderChart() {
            // 从dataArr中提取country和portCount，并按portCount降序排序
            const sortedData = this.dataArr.sort((a, b) => a.asset_count - b.asset_count);
            const countries = sortedData.map((item) => item.country);
            const portCounts = sortedData.map((item) => parseInt(item.asset_count));

            // 初始化ECharts实例
            const myChart = echarts.init(this.$refs.chart);

            let option = {
                grid: {
                    left: '3%',
                    right: '12%',
                    top: '5%',
                    bottom: '15%',
                    containLabel: true
                },
                xAxis: {//配置x轴，x轴和y轴互换
                    type: "value",       //值轴
                    axisTick: {
                        show: false // 不显示坐标轴刻度线
                    },
                    axisLine: {
                        show: false, // 不显示坐标轴线
                    },
                    axisLabel: {
                        show: false, // 不显示坐标轴上的文字
                    },
                    splitLine: {
                        show: false // 不显示网格线
                    },

                },
                yAxis: {//配置y轴
                    type: "category",   //类目轴
                    axisTick: {
                        show: false // 不显示坐标轴刻度线
                    },
                    axisLine: {
                        show: false, // 不显示坐标轴线
                    },
                    axisLabel: {//y轴文字的配置
                        textStyle: {
                            color: "white",//Y轴内容文字颜色
                        },
                    },
                    data: countries
                },
                series: [//配置数据系列，一个图表可以配置多个数据系列
            
                    {
                        barWidth:30,
                        name: "销量",
                        type: "bar",//数据系统的类型，即图表的类型。bar代表柱状状图
                        data: portCounts,
                        label: {
                            show: true, // 显示标签
                            position: 'right', // 标签位置顶部
                            color: "white"
                        },
                    
                    }
                ]
            };

            option && myChart.setOption(option);

            // 渲染图表
            myChart.setOption(option);
        }
    }
}
</script>

<style lang="less" scoped></style>
